<script setup type="module">
import { definePerson } from '../store/store.js'
let person = definePerson()
</script>

<template>
    <div>
        <h1>List页面,展示Pinia中的数据</h1>
        读取姓名:{{ person.username }} <br>
        读取年龄:{{ person.age }} <br>
        通过get年龄:{{ person.getAge }} <br>
        爱好数量:{{ person.getHobbiesCount }} <br>
        所有的爱好:
        <ul>
            <li v-for='(hobby, index) in person.hobbies' :key="index" v-text="hobby"></li>
        </ul>
        <button @click="person.doubleAge()">添加爱好</button>
        <button @click="person.$reset">重置数据</button>
        <button @click="person.$patch({ username: 'll', age: 20, hobbies: [1, 2] })">刷新数据</button>
    </div>
</template>

<style scoped></style>
